<template>
  <div :style="{...styles.backgroundStyles}" class="position-full">
    <div class="camera-content">
      <div class="camera-left" :style="{...styles.componentStyles,fontSize:widget.UI.data.textSize+'px'}">
        <div class="camera-left-title pad-top-btm-10" :style="textStyle('large')">
          摄像头控制
          <span :style="textStyle('small')">(单击调用预设，长按保存预设)</span>
        </div>
        <div class="camera-left-button mar-top-20">
          <div class="btn flex-item"
               :style="containerStyle(index)" v-for="(item, index) in  widget.UI.data.presets" :key="index">
                 <pre :style="textStyle('normal',index)">{{item.name}}</pre>
          </div>
        </div>
      </div>
      <div class="camera-left" :style="{ ...styles.componentStyles }">
        <div class="camera-left-title pad-top-btm-5" :style="{ ...styles.textStyles }">
          <span :style="textStyle('small')">注：长按进行摄像头方向及缩放调整</span>
        </div>
        <div class="box-content " :class="{ 'flex-item-box': widget.UI.data.useFocus}">
        <div class="box-left" v-if="widget.UI.data.usePtzSpeed && widget.UI.data.useFocus">
          <span class="speed" :style="textStyle('small')">速度{{speed}}</span>
          <el-slider v-model="speed"  class="speed-slide" vertical></el-slider>
        </div>
          <div class="flex-item-box" v-else-if="widget.UI.data.usePtzSpeed  && !widget.UI.data.useFocus">
            <span class="speed" :style="textStyle('small')">速度{{speed}}</span>
            <el-slider v-model="speed" style="width:100%"></el-slider>
          </div>

          <div class="box-right">
          <div class="flex-btn" v-if="widget.UI.data.useFocus">
          <div v-for="(item, index) in btnGroup" :key="index">
            <div class="icon-bg flex-item" :style="{...styles.contentStyles}">
              <i class="iconfont" :class="item.icon" :style="textStyle('icon')"></i>
            </div>
            <div :style="textStyle('normal')" class="mar-top-10">{{item.title}}</div>
          </div>
          </div>
        <div class="flex-item mar-top-10">
          <img :src="require('@/assets/img/orientation-panel-default.png')" alt="" :width="widget.UI.data.panelSize||200" :height="widget.UI.data.panelSize||200">
        </div>
        <div class="flex-btn mar-top-10">
          <div v-for="(item, index) in btnArr" :key="index">
            <div class="icon-bg flex-item" :style="{...styles.contentStyles}">
              <i class="iconfont" :class="item.icon" :style="textStyle('icon')"></i>
            </div>
            <div :style="textStyle('normal')" class="mar-top-10">{{item.title}}</div>
          </div>
        </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex';
  import {formatColor,formatFontSize} from "@/utils";
  export default {
    name: 'Camera',
    props: {
      widget: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        activeReset: 0,
        speed: 0,
        formatColor: formatColor,
        formatFontSize:formatFontSize,
        btnGroup:[
          {title: '放大', icon: ' icon-add-select'},
          {title: '缩小', icon: 'icon-sami-select'},
          {title: '近焦', icon: 'icon-jinjiao'},
          {title: '远焦', icon: 'icon-yuanjiaokaobei'},
        ]
      };
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      btnArr() {
        let arr = [{title: '关闭', icon: 'icon-switch', isDisPlay: this.widget.UI.data.usePowerOff},
          {title: '放大', icon: ' icon-add-select', isDisPlay: !this.widget.UI.data.useFocus},
          {title: '缩小', icon: 'icon-sami-select', isDisPlay: !this.widget.UI.data.useFocus},
          {title: '唤醒', icon: 'icon-switch', isDisPlay: this.widget.UI.data.usePowerOn},
        ]
        return arr.filter((item)=> {
          return item.isDisPlay
        })
      },
      styles() {
        const {
          backgroundColor = '',
          componentColor = '',
          textColor = '',
          contentColor = '',
          presetSize = {}
        } = this.widget.UI.data
        const backgroundStyles = {};
        const componentStyles = {};
        const textStyles = {};
        const contentStyles = {};
        const widthStyles = {};
        backgroundColor && (backgroundStyles.backgroundColor = formatColor(backgroundColor, this.activeTheme));
        componentColor && (componentStyles.backgroundColor = formatColor(componentColor, this.activeTheme));
        textColor && (textStyles.color = formatColor(textColor, this.activeTheme));
        contentColor && (contentStyles.backgroundColor = formatColor(contentColor, this.activeTheme));
        presetSize && (widthStyles.width = presetSize.width + 'px');
        presetSize && (widthStyles.height = presetSize.height + 'px')
        return {
          backgroundStyles: backgroundStyles,
          componentStyles: componentStyles,
          textStyles: textStyles,
          contentStyles: contentStyles,
          widthStyles: widthStyles,
        };
      },
      containerStyle() {
        return (idx) => {
          const {textAntiColor,textColor,activeColor,contentColor,presetSize={},textSize=16} = this.widget.UI.data;
          return {
            'color': formatColor(this.activeReset === idx ? textAntiColor : textColor, this.activeTheme),
            'backgroundColor': formatColor(this.activeReset === idx ? activeColor : contentColor, this.activeTheme),
            'width': presetSize.width + 'px',
            'height': presetSize.height + 'px',
            'fontSize':textSize + 'px',
          }
        };
      },
      textStyle() {
        return (type,idx) => {
          const {textColor,textSize=16,textAntiColor} = this.widget.UI.data;
          return {
            'color': formatColor(this.activeReset === idx ? textAntiColor : textColor, this.activeTheme),
            'fontSize': formatFontSize(type,textSize) + 'px',
          }
        };
      },
    },

  };
</script>

<style scoped lang="less">
  .speed {
    width: 80px;
    font-size: 14px;

  }
  .position-full {
    background: #f5f5f5;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .camera-title {
    // height: 48px;
    // min-width:500px ;
    // border: 1px solid #f00;
    // border-radius:30px ;
    gap: 15px;
    padding: 20px 0;
    font-size: 18px;
  }

  .camera-content {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    padding-right: 20px;
    gap: 30px;
    display: flex;
    justify-content: center;

    .camera-left {
      width: 50%;
      height: 95%;
      // background: rgb(237, 235, 235);
      padding-left: 30px;
      box-sizing: border-box;
      overflow: auto;

      // border: 1px solid #f00;
      .icon-bg {
       padding: 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 100%;

        i {
          font-size: 24px;
          color: #666;

        }
      }

      .flex-btn {
        display: flex;
        align-items: center;
        justify-content: space-around;
        text-align: center;
      }

      .camera-left-title {
        font-weight: bold;

        span {
          color: rgba(102, 102, 102, 1);
          font-size: 14px;
          font-weight: 400;
        }
      }

      .camera-left-button {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;

        .btn {
          background: #fff;
          width: 120px;
          height: 46px;
        }
      }
    }
  }

  .box {
    width: 100%;
    height: 50%;
    overflow: auto;

  }

  .title {
    font-size: 18px;
    color: #333;
    font-weight: bold;
  }

  .flex-item-box {
    display: flex;
    align-items: center;
    padding-right: 15px;
    box-sizing: border-box;
  }

  .flex-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;

    .box-item {
      // width: 90px;
      // height: 90px;
      border-radius: 15px;
      background: #fff;
      box-shadow: rgb(0 0 0 / 10%) 0 1px 2px 0;

      .box-item-circle {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        background: rgba(242, 242, 242, 1);
        color: #333;
        font-size: 14px;
      }

      .box-item-top {
        text-align: center;

        i {
          font-size: 24px;
        }
      }

      .box-item-bot {
        font-size: 14px;
        text-align: center;
      }
    }
  }


  .box-content{
    width: 100%;
    height: calc(100% - 40px);

    .box-left{
      width: 80px;
      height: 90%;
      flex-shrink: 0;
      .speed {
        width: 80px;
        font-size: 14px;

      }
      .speed-slide{
        height: 90%;
        margin-top: 15px;
      }
    }
    .box-right{
      flex: 1;
    }
  }
</style>
